<template>
    <div class="good-form">
        <!-- <el-page-header @back="$router.back()" :content="商品$(id ? '编辑' : '新增')"></el-page-header> -->
        <el-page-header @back="$router.back()" content="添加商品"></el-page-header>

        <!-- 表单 -->
        <!-- ref="form" 在一个组件上写ref 目的是为了获取组件实例 -->
        <!-- :model="ruleform" 数据绑定 -->
        <!-- :rules="rules" 是指定校验规则 -->
        <el-form ref="form" :model="ruleform" :rules="rules" label-width="100px" style="width: 600px; margin-top: 20px">
            <!-- el-form-item 是表单中的每一项 -->
            <!-- prop="name" 校验规则 -->
            <el-form-item label="商品名称" prop="name">
                <!-- v-model="ruleform.name 输入框和rulefrom中的name进行双向绑定 -->
                <el-input v-model="ruleform.name"></el-input>
            </el-form-item>

            <el-form-item label="商品描述" prop="desc">
                <!-- v-model="ruleform.name 输入框和rulefrom中的name进行双向绑定 -->
                <el-input v-model="ruleform.desc"></el-input>
            </el-form-item>

            <el-form-item label="商品分类" prop="cate">
                <CateSelect v-model="ruleform.cate"></CateSelect>
            </el-form-item>

            <el-form-item label="商品价格" prop="price">
                <el-input-number v-model="ruleform.price" :precision="2" :step="0.1" :min="0"></el-input-number>
            </el-form-item>

            <el-form-item label="是否热销" prop="hot">
                <el-switch v-model="ruleform.hot"></el-switch>
            </el-form-item>

            <el-form-item label="商品图片">
                <!-- 如果v-model用在组件上，等价于：:value + @input -->
                <!-- <ImgUpload @input="xxx" v-model="ruleform.img"></ImgUpload> -->
                <ImgUpload v-model="ruleform.img"></ImgUpload>
                <!-- 看一下，图片上传成功后，能不能收集到图片在服务器上的路径 -->
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleform)">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import CateSelect from './components/CateSelect.vue'
    import ImgUpload from './components/ImgUpload.vue';
    // import {submitGood,getGoodInfo} from '@/api/goods'
    export default {
        name:"goodForm",
        props:["id"],
        components:{
            CateSelect,
            ImgUpload
        },
        data(){
            return {
                ruleform: {
                    name: "", // 商品名称
                    desc: "", // 商品描述
                    price:0,  // 商品价格
                    hot:true, // 是否热销
                    img:"",   // 商品的图片
                    cate:"",  // 商品的分类
                },
                rules: {
                    // name: [
                    //     // required: true  表示这个输入框是必填项
                    //     // message: '请输入活动名称'  提示
                    //     // trigger: 'blur'  当失去焦点时提醒
                    //     { required: true, message: '请输入商品名称', trigger: 'blur' },
                    //     // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    //     { pattern:/[\u4e00-\u9fa5]{4,8}/, message: '商品名称要求是4-8个中文汉字', trigger: 'blur' }
                    // ],
                    // desc: [
                    //     {required: true, message: '请填写商品介绍', trigger: 'blur'},
                    //     {
                    //         min: 20,
                    //         max: 30,
                    //         message: "商品名称要求20-30个字符",
                    //         trigger: "blur",
                    //     },
                    // ],
                    // cate: [
                    //     {required: true, message: '请选择商品品类', trigger: 'change'},
                    // ],
                    // price: [
                    //     {required: true, message: '请填写商品价格', trigger: 'change'},
                    // ],
                    // img: [
                    //     {required: true, message: '请上传商品图片', trigger: 'change'},
                    // ]
                }
            };
        },
        // mounted: {
        //     // 如果id存在，表示点击了编辑过来的
        //     if(this.id) {
        //         getGoodInfo(this.id).then(res => {
        //             // console.log(res);
        //             let info = res.data.info;
        //             this.ruleform = {
        //                 name: info.name, // 商品名称
        //                 desc: info.desc, // 商品描述
        //                 price: info.price,  // 商品的价格
        //                 hot: info.hot, // 是否热销
        //                 img: info.img,   // 商品的图片
        //                 cate: info.cate,  // 商品的分类
        //             }
        //         })
        //     }
        // },
        methods:{
            // 提交
            submitForm(formName) {
                // this.$refs.form 得到上面表单组件的实例
                // validate 是提交数据之前进行校验，如果校验通过走if    如果校验没有通过走else
                // this.$refs.form.validate((valid) => {
                //     if (valid) {
                //         // alert('submit!');
                //         // 调用接口，实现商品的添加
                //         let data = {...this.ruleform};

                //         // 调用submitCood接口,如果里面有id表示编辑
                //         // 调用submitCood接口,如果里面没有id表示新增
                //         // if(this.id) data.id = this.id;

                //         submitGood(data).then(res => {
                //             // console.log("res",res);
                //             if(res.data.info) {
                //                 this.$message({
                //                     message:"恭喜你，商品添加成功",
                //                     // message:"恭喜你，商品${this.id ? '编辑' : '新增'}成功",
                //                     type:"success",
                //                     duration:1500,
                //                     onClose: () => {
                //                         this.$router.back();
                //                     }
                //                 })
                //             }
                //         })
                //     } else {
                //         console.log('error submit!!');
                //         return false;
                //     }
                // });
                // console.log(formName)
                this.$router.push({path:'/good/list',query:formName})
            },
            // 重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
    }
</script>

<style scoped>
    .good-form{
        padding: 20px;
        box-sizing: border-box;
    }
</style>